<template>
	<view>
		<view class="page-top">
			提示：为了您的安全，请妥善保管密码
		</view>
		<view class="page-middle">
			<view class="input-item">
				<text>旧密码</text>
				<view class="input-wrapper">
					<input :type="ifPasswordForOld ? 'password' : 'text'"
								 placeholder="请输入旧密码" placeholder-style="font-size: 28rpx" v-model="oldPassword">
					<view class="image-box" @click="changeTypeForOld">
						<image :src="ifPasswordForOld ? '/static/image/common/input/off.png' : '/static/image/common/input/on.png'"></image>
					</view>
				</view>
			</view>
			<view class="input-item">
				<text>新密码</text>
				<view class="input-wrapper">
					<input :type="ifPasswordForNew ? 'password' : 'text'"
								 placeholder="请输入新密码" placeholder-style="font-size: 28rpx" v-model="newPassword">
					<view class="image-box" @click="changeTypeForNew">
						<image :src="ifPasswordForNew ? '/static/image/common/input/off.png' : '/static/image/common/input/on.png'"></image>
					</view>
				</view>
			</view>
			<view class="input-item">
				<text>确认密码</text>
				<view class="input-wrapper">
					<input :type="ifPasswordForConfirm ? 'password' : 'text'"
								 placeholder="请确认新密码" placeholder-style="font-size: 28rpx" v-model="confirmPassword">
					<view class="image-box" @click="changeTypeForConfirm">
						<image :src="ifPasswordForConfirm ? '/static/image/common/input/off.png' : '/static/image/common/input/on.png'"></image>
					</view>
				</view>
			</view>
		</view>
		<button type="primary" @click="editPassword">确认修改</button>
    <modal v-model="showModal" confirm-style="color: #DC2115" title='询问'
           text='是否要修改密码？' @confirm='doEditPassword'></modal>
    <message ref="message"></message>
	</view>
</template>

<script>

  import store from "@/store/index.js"
  import {md5} from "../../lib/md5/md5";
  import {editPassword} from "../../api/my/password";

  export default {
		data() {
			return {
				oldPassword: '',
				newPassword: '',
				confirmPassword: '',
				ifPasswordForOld: true,
				ifPasswordForNew: true,
				ifPasswordForConfirm: true,
        showModal: false
			}
		},
		methods: {
			changeTypeForOld() {
				this.ifPasswordForOld = !this.ifPasswordForOld;
			},
			changeTypeForNew() {
				this.ifPasswordForNew = !this.ifPasswordForNew;
			},
			changeTypeForConfirm() {
				this.ifPasswordForConfirm = !this.ifPasswordForConfirm;
			},
      /**
       * 打开确认修改密码的弹窗
       */
      editPassword() {
        if (!this.oldPassword) {
          this.$refs.message.error('原密码不能为空');
          return;
        }
        if (!this.newPassword) {
          this.$refs.message.error('新密码不能为空');
          return;
        }
        if (this.newPassword !== this.confirmPassword) {
          this.$refs.message.error('新密码和确认密码不一致');
          return;
        }
        this.showModal = true;
      },
      /**
       * 修改密码
       */
      doEditPassword() {
        let query = {
          oldPassword: md5(this.oldPassword),
          newPassword: md5(this.newPassword)
        };
        editPassword(query).then(res => {
          if (res.data.code === 200) {
            this.$refs.message.success("密码修改成功，请重新登录");
            setTimeout(() => {
              store.commit('logout')
            }, 500)
          } else {
            this.$refs.message.error(res.data.info);
          }
        })
      }
		},
    /**
     * 点击右上角首页按钮，跳转到首页
     */
    onNavigationBarButtonTap() {
      store.commit('returnToHome')
    }
	}
</script>

<style scoped lang="scss">
	@import "~@/static/css/my/password.scss";
</style>
